<script setup>
// components
import TableColumn from './TableColumn.vue'

defineProps({
  data: { type: Array, default: () => [] },
  columns: { type: Array, default: () => [] },
  indexLabel: { type: String, default: '序号' },
  indexWidth: { type: [String, Number], default: '55px' },
  selectionWidth: { type: [String, Number], default: '55px' },
  /** ElementPlus */
  stripe: Boolean,
  border: Boolean,
  rowClassName: { type: String, default: '' },
  height: { type: [String, Number], default: null },
  maxHeight: { type: [String, Number], default: null },
  size: { type: String, default: 'default' },
  fit: { type: Boolean, default: true },
  showHeader: { type: Boolean, default: true },
  emptyText: { type: String, default: '暂无数据' },
  selection: Boolean,
  reserveSelection: Boolean
})

const emit = defineEmits(['selectionChange'])
const selectionChange = (selection) => {
  emit('selectionChange', selection)
}
</script>

<template>
  <el-table
    :data="data"
    :stripe="stripe"
    :border="border"
    :height="height"
    :max-height="maxHeight"
    :size="size"
    :fit="fit"
    :show-header="showHeader"
    style="width: 100%"
    :empty-text="emptyText"
    @selection-change="selectionChange"
  >
    <!-- 自定义数据为空时显示 -->
    <template #empty>
      <slot name="empty" />
    </template>
    <!-- type index -->
    <el-table-column
      v-if="index"
      type="index"
      :label="indexLabel"
      :width="indexWidth"
    />
    <!-- type selection -->
    <el-table-column
      v-if="selection"
      type="selection"
      :reserve-selection="reserveSelection"
      :width="selectionWidth"
    ></el-table-column>
    <!-- table-colum -->
    <TableColumn
      v-for="(item, index) in columns"
      :key="item.prop || index"
      :item="item"
    >
      <template v-if="item.slotName" #[item.slotName]="scope">
        <slot :name="item.slotName" :scope="scope" />
      </template>
    </TableColumn>
  </el-table>
</template>

<style lang="less" scoped>
.el-table {
  :deep(th.el-table__cell) {
    font-size: 13px;
    color: #515a6e;
    background-color: #f5f5f7;
  }
  :deep(.el-link) {
    font-size: 12px;
  }
}
</style>
